<template>
	<div @click="focusInput">
		<div style="width: 100%; text-align: center;"><el-icon style="font-size: 50px;"><el-icon-box /></el-icon></div>
		<div style="width: 100%; text-align: center; font-size: 30px;">扫码入库</div>


		<el-main>
			<el-scrollbar ref="scrbar" id="container">
				<el-card class="goods_card" v-for="(item, index) in goods" :key="item.id" >
				    	<el-row class="font24">
					    	<el-col :span="3">#{{index+1}}</el-col>
					    	<el-col :span="3">{{item.show.goods_number}}</el-col>
					    	<el-col :span="6">{{item.show.goods_desc}}</el-col>
					    	<el-col :span="3">{{item.show.sku_text}}</el-col>
					    	<el-col :span="3">数量：{{item.num_type_value}}</el-col>
					    </el-row>
				</el-card>
			</el-scrollbar>
			<el-button type="primary" size="large" :loading="is_loading" @click="submit">
				入 库 
				<el-icon style="font-size: 20px;"><el-icon-box /></el-icon>
			</el-button>
		</el-main>

		<el-main style="margin-top: 40px;" @click="focusInput">
			<el-input ref="scan" v-model="express_number" placeholder="请扫码" @change="scanChange"  clearable></el-input>
		</el-main>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				express_number: "",
				stock_type: 1, // 1入库  2出库
				goods: [],
				is_loading: false
			}
		},
		mounted() {
			this.$nextTick(() => {
                this.$refs.scan.focus();



                // this.$refs.scrbar.scrollTo(0, 1000)
                // var _this = this
                // document.getElementById('app').onclick = function() { _this.$refs.scan.focus(); };
            })

		},
		methods: {
			focusInput() {
				this.$refs.scan.focus()
				// alert(1)
			},

			async scanChange() {
				
				this.getSMGoods(this.express_number)

				this.express_number = "";
			},
			async getSMGoods(code) {
				var reqData = {
					code : code
				}
				var res = await this.$API.stock.scanGoods.get(reqData)
				
				if (res.code == 200) {
					this.addGoods(res.data)
				} else {
					this.$message.error(res.message)
					return false
				}
			},
			addGoods(goods) {
				var goods_item = {
					// id: this.$TOOL.generateUUID(),
					price_id: goods.price_id,
					stock_type: this.stock_type, //出库 入库
					num_type_value: goods.instock,
					remake: '扫码出库',
					created_at: '',
					show: {
						goods_number: goods.goods_number,
						goods_desc: goods.goods_desc,
						company_name: goods.company_name,
						sku_text: goods.sku_text
					}
				}
				// console.log(goods_item);
				this.goods.push(goods_item);

				var scrbar = this.$refs.scrbar
				console.log(scrbar.setScrollTop(-1))

			},
			async submit() {

				this.is_loading = true
				var reqData = {
					data: {
						stock_data: this.goods
					}
				}

				var res = await this.$API.stock.stockAddData.post(reqData)
				this.is_loading = false
				if (res.code == 200) {
					this.goods = []
					this.$alert('入库成功', "提示", {type: 'success'})
				} else {
					this.$message.error(res.message)
				}

			}
		}
	}
</script>
<style type="text/css">
	.button-container {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
		width: 100%;
		bottom: 0px;
	}
	.button-container .wxbutton {
		margin: 0 auto;
	}
	.font24 {
		font-size: 24px ;
	}
	.font24+.font24{
		margin-top: 10px;
	}
	.goods_card + .goods_card {
		margin-top: 10px;
	}
	
</style>